<template>
	<view class="gyd-search">
		<uni-search-bar @confirm="search" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
			@cancel="cancel" @clear="clear" :placeholder="placeholder" :radius="radius" :clearButton="clearButton"
			:cancelButton="cancelButton" :cancelText="cancelText" :bgColor="bgColor" :textColor="textColor"
			:maxlength="maxlength">
			<template v-slot:searchIcon v-if="searchIcon">
				<uni-icons :color="iconColor" :size="iconSize" :type="searchIcon" />
			</template>
			<template v-slot:clearIcon v-if="clearIcon">
				<uni-icons :color="iconColor" :size="iconSize" :type="clearIcon" />
			</template>
		</uni-search-bar>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		defineProps,
		ref
	} from 'vue';

	defineOptions({
		name: 'gyd-tabs'
	});

	const props = defineProps({
		placeholder: {
			type: String,
			default: '请输入搜索关键字',
		},
		radius: {
			type: Number,
			default: 10,
		},
		clearButton: {
			type: String,
			default: 'auto',
		},
		cancelButton: {
			type: String,
			default: 'none',
		},
		cancelText: {
			type: String,
			default: '取消',
		},
		bgColor: {
			type: String,
			default: '#fff',
		},
		textColor: {
			type: String,
			default: '#000',
		},
		maxlength: {
			type: Number,
			default: 10,
		},
		searchIcon: {
			type: String,
			default: '',
		},
		clearIcon: {
			type: String,
			default: '',
		},
		iconSize: {
			type: Number,
			default: 18,
		},
		iconColor: {
			type: String,
			default: '#999999',
		}
	});

	const searchValue = ref();
	const emits = defineEmits(['search', 'input', 'clear', 'blur', 'focus', 'cancel']);

	function search(res) {
		searchValue.value = res.value;
		emits('search', searchValue.value);
	}

	function input(res) {
		searchValue.value = res;
		emits('input', searchValue.value);
	}

	function clear(res) {
		searchValue.value = res.value;
		emits('clear', searchValue.value);
	}

	function blur(res) {
		searchValue.value = res.value;
		emits('blur', searchValue.value);
	}

	function focus(res) {
		searchValue.value = res.value;
		emits('focus', searchValue.value);
	}

	function cancel(res) {
		searchValue.value = res.value;
		emits('cancel', searchValue.value);
	}
</script>

<style lang="scss">
	.gyd-search {
		background-color: #F8F8F8;
	}
</style>